<template>
  <header class="head-nav">
    <div class="logo-container">
      <img src="../assets/logo.png" class="logo" alt="" />
      <span class="title">资金后台管理系统</span>
    </div>
    <div class="user">
      <div class="userinfo">
        <img :src="user.avatar" class="avatar" alt="" />
        <div class="welcome">
          <p class="name comename">欢迎</p>
          <p class="name avatarname">{{ user.username }}</p>
        </div>
        <el-dropdown trigger="click" @command="setDialogInfo">
          <span class="el-dropdown-link">
            <el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="info">个人信息</el-dropdown-item>
              <el-dropdown-item command="logout">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </header>
</template>

<script setup>
import { useUserStore } from "../store/user";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const userStore = useUserStore();

const router = useRouter();
const user = userStore.user;
const setDialogInfo = (cmditem) => {
  if (!cmditem) {
    ElMessage({
      message: "菜单选项缺少command属性",
      type: "error",
    });
    return;
  }
  switch (cmditem) {
    case "info":
      showInfoList();
      break;
    case "logout":
      logout();
      break;
  }
};
const showInfoList = () => {
  // 个人信息
  router.push("/infoshow");
};
const logout = () => {
  // 清除token
  localStorage.removeItem("eleToken");
  userStore.clearCurrentState();

  // 页面跳转
  router.push("/login");
};
</script>

<style lang="scss" scoped>
.head-nav {
  width: 100%;
  height: 60px;
  min-width: 600px;
  padding: 5px;
  background: #324057;
  color: #fff;
  border-bottom: 1px solid #1f2d3d;
  display: flex;
}
.logo-container {
  line-height: 60px;
  flex: 1;
}
.logo {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  vertical-align: middle;
  display: inline-block;
}
.title {
  vertical-align: middle;
  font-size: 22px;
  font-family: "Microsoft YaHei";
  letter-spacing: 3px;
}
.user {
  line-height: 60px;
  text-align: right;

  padding-right: 10px;
}
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align: middle;
  display: inline-block;
}
.welcome {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  padding: 0 5px;
}
.name {
  line-height: 20px;
  text-align: center;
  font-size: 14px;
}
.comename {
  font-size: 12px;
}
.avatarname {
  color: #409eff;
  font-weight: bolder;
}
.username {
  cursor: pointer;
  margin-right: 5px;
}
.el-dropdown {
  color: #fff;
}
.userinfo {
  display: flex;
  justify-content: end;
  align-items: center;
  height: 60px;
}
</style>
